<template>
    <view>
        <ly-curriculumtable  :weekTableState="true" :weekTableNumber="weekNumbers" 
         :controlWeek="controlWeek" :timetableType="timetableType" 
         :timetables="timetables" startdDate="2022-12-12" :weekButton="weekButton" 
         @nextWeekClick="nextWeekClick" @lastWeekClick="lastWeekClick" 
         @courseClick="courseClick" @weekSelectClick="weekSelectClick" 
         @weekOpenClick="weekOpenClick">

         </ly-curriculumtable> 
         <!-- 课程详情 -->
         <u-modal class="modal" :show="showMyModal"  title="课程详情" 
                        :closeOnClickOverlay="true" 
                        :showConfirmButton="false" @close="closeModal">
            <view class="slot-content">
                <u-cell-group>
                    <u-cell
                        v-for="(item,index) in modalItem" :key="index"
                        :title="item"
                        :icon="modalIcon[index]"
                                :iconStyle="{color: colorList()[index+1]}"
                        size="large"
                    ></u-cell>
                </u-cell-group>
            </view>
         </u-modal>
    </view>
</template>
<script>
        export default {
            data() {
                return {

                    weekNumbers:20,//一共显示几周
                    controlWeek:1,//显示的第几周
                    weekButton:true,//开启上一周下一周按钮
                    startdDate:'2022-12-07', //开始时间  默认为当前时间
                    timetables: [
                      ['大学英语', '大学英语', '大学英语', '', '', '', '毛概', '毛概',],
                      ['', '', '信号与系统', '信号与系统', '模拟电子技术基础', '模拟电子技术基础', '模拟电子技术基础', '模拟电子技术基', '', '', '', '信号与系'],
                      ['大学体育', '大学体育', '形势与政策', '形势与政策', '', '', '', '', ''],
                      ['', '', '', '', '电装实习', '电装实习', '', '', ''],
                      ['', '', '数据结构与算法分析数据结构与算法分析', '数据结构与算法分析数据结构与算法分析', '', '', '', '', '信号与系'],
                    ],
                    timetableType:[ 
                       { index: '1', name: '00:00\n01:00' },
                       { index: '2', name: '01:00\n02:00' },
                       { index: '3', name: '02:00\n03:00' },
                       { index: '4', name: '03:00\n04:00' },
                       { index: '5', name: '04:00\n05:00' },
                       { index: '6', name: '05:00\n06:00' },
                       { index: '7', name: '06:00\n07:00' },
                       { index: '8', name: '07:00\n08:00' },
                       { index: '9', name: '08:00\n09:00' },
                       { index: '10', name: '09:00\n10:00'},
                       { index: '11', name: '10:00\n11:00'},
                       { index: '12', name: '11:00\n12:00'},
					   { index: '13', name: '12:00\n13:00'},
					   { index: '14', name: '13:00\n14:00'},
					   { index: '15', name: '14:00\n15:00'},
					   { index: '16', name: '15:00\n16:00'},
					   { index: '17', name: '16:00\n17:00'},
					   { index: '18', name: '17:00\n18:00'},
					   { index: '19', name: '18:00\n19:00'},
					   { index: '20', name: '19:00\n20:00'},
					   { index: '21', name: '20:00\n21:00'},
					   { index: '22', name: '21:00\n22:00'},
					   { index: '23', name: '22:00\n23:00'},
					   { index: '24', name: '23:00\n24:00'},
					   ],
                    //弹窗属性
                    showMyModal: false,//课程详情弹窗
                    modalIcon: ['calendar','home','server-man','clock'],//图标
                    modalItem: [],//依次是课程名、教室、教师、上课时间--为了适配渲染
                }

            },
            methods:{
                courseClick(re){
                    console.log(re)

                    //console.log(JSON.stringify(re))
                    this.modalItem[0]="课程: "+re.name;
                    this.modalItem[1]="教室: 213"
                    this.modalItem[2]="教师: 吴老师"
                    this.modalItem[3]="时间: 9:00-9:40";
                    this.showMyModal=true;
                    //console.log(",",JSON.stringify(this.modalItem))

                },
                nextWeekClick(e){
                    console.log("下一周",e)
                },
                lastWeekClick(e){
                    console.log("上一周",e)
                },
                weekOpenClick(){
                    console.log("点击了第几周")
                },
                weekSelectClick(e){
                    console.log("您选择了",e)
                },
                //关闭弹窗
                closeModal(){
                    this.showMyModal=this.showMyModal==true?false:true;
                },
                //返回颜色
                colorList() {
                    return [
                        "#ffffff", //0
                        "#ffaa00", //1
                        "#33CC99",
                        "#ff5500", //3
                        "#789262", //4
                        "#66CCCC", //5
                        "#9999FF", //6
                    ]
                },

        },
    }
</script>